import { useState, useEffect } from 'react';

export const App = () => {
  const [count, setCount] = useState(0);
  // 组件渲染完毕后执行一个副作用
  useEffect(() => {
    console.log('effect 执行了', count);
    document.title = count;
  }, [count]);

  // 第二个状态变量
  const [number, setNumber] = useState(0);
  const handleClick2 = () => {
    // number 的变化也会触发 effect 的执行
    setNumber(number + 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <h1>{number}</h1>
      <button onClick={handleClick2}>number+1</button>
    </div>
  );
};
